<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="../assets/bootstrap/bootstrap-icons.css">
    <style>
        .card {
            width: 400px;
            margin: 0 auto;
        }

        .table {
            width: 800px;
            margin: 0 auto;
        }

        .btn-success {
            width: 100%;
        }

        .input-size {
            width: 120px;
            margin: 0 auto;
            text-align: center;
        }

        td {
            text-align: center;
            vertical-align: middle;
        }

        .font {
            color: brown;
            font-weight: bold;
            padding: 0 4px;
        }
    </style>
</head>

<body>
    <div id="app">

        <div class="card my-3 bg-body-secondary">
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">产品名称</label>
                    <input type="text" class="form-control" v-model="product.name">
                </div>
                <div class="mb-3">
                    <label class="form-label">产品单价</label>
                    <input type="text" class="form-control" v-model="product.price">
                </div>
                <div class="mb-3">
                    <label class="form-label">购买数量</label>
                    <input type="text" class="form-control" v-model="product.num">
                </div>
                <div class="mb-3">
                    <button type="button" class="btn btn-success" @click="addProductItem()">添加</button>
                </div>
            </div>
        </div>

        <table class="table table-bordered">
            <thead class="table-dark">
                <tr>
                    <td>
                        <input type="checkbox" v-model="all">
                    </td>
                    <td>编号</td>
                    <td>产品名称</td>
                    <td>产品单价</td>
                    <td>购买数量</td>
                    <td>控制</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(p,i) in products">
                    <td>
                        <input type="checkbox" v-model="p.state">
                    </td>
                    <td>{{ i+1 }}</td>
                    <td>{{ p.name }}</td>
                    <td>{{ p.price }}</td>
                    <td>
                        <div class="input-group input-group-sm input-size">
                            <button class="btn btn-outline-secondary bi bi-dash" type="button" @click="subProductNum(p,i)"></button>
                            <input type="text" class="form-control" readonly :value="p.num">
                            <button class="btn btn-outline-secondary bi bi-plus" type="button" @click="addProductNum(p)"></button>
                        </div>
                    </td>
                    <td>
                        <button type="button" class="btn btn-danger btn-sm" @click="removeProductItem(i)">删除</button>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="2">总计</td>
                    <td colspan="3">
                        被选中<span class="font">{{ countResult.count }}</span>个,总价<span class="font">{{ countResult.sum }}</span>元
                    </td>
                    <td>
                        <button type="button" class="btn btn-danger btn-sm" @click="removeChooseProduct()">删除选中项</button>
                    </td>
                </tr>
            </tfoot>
        </table>

    </div>
    <script type="module">
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../assets/vue3/vue.esm-browser.js"
        createApp({
            data() {
                return {
                    product: {
                        name: "",
                        price: 100,
                        num: 1,
                        state:false
                    },
                    products: []
                }
            },
            computed:{
                countResult(){
                    let result = {
                        count:0,
                        sum:0
                    }
                    for (let p of this.products) {
                        if(p.state){
                            result.count++;
                            result.sum += p.price*p.num
                        }
                    }
                    return result
                },
                all:{
                    get(){
                        if(this.products.length==0) return false;
                        return this.products.every(item=>item.state);
                    },
                    set(nv){
                        this.products.forEach(item => item.state = nv);
                    }
                }
            },
            methods: {
                addProductItem() {
                    // this.products.push( { ...this.product } )
                    this.products.push(this.product)
                    this.product = {
                        name: "",
                        price: 100,
                        num: 1,
                        state:false
                    };
                },
                subProductNum(p,i) {
                    let num = p.num * 1 - 1;
                    if(num<=0){
                        let flag = confirm("是否需要删除 "+ p.name +" 产品")
                        if(flag){
                            this.products.splice(i,1)
                        }
                    }else{
                        p.num = num;
                    }
                },
                addProductNum(p) {
                    p.num = p.num * 1 + 1;
                },
                removeProductItem(i){
                    this.products.splice(i,1)
                },
                removeChooseProduct(){
                    this.products = this.products.filter(item=>!item.state)
                },
                
            }
        }).mount("#app")
    </script>
</body>

</html>